<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        label.chk {
            cursor: pointer;
        }
        
        label.chk i {
            font-style: normal;
            display: inline-block;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 12px;
            color: #fff;
            vertical-align: middle;
            margin: -2px 4px 1px 0px;
            border: #2489c5 1px solid;
        }
        
        label.chk input[type="checkbox"],
        input[type="radio"] {
            display: none;
        }
        
        label.chk input[type="radio"]+i {
            border-radius: 7px;
        }
        
        label.chk input[type="checkbox"]:checked+i,
        input[type="radio"]:checked+i {
            background: #2c8df0;
        }
        
        label.chk input[type="checkbox"]:disabled+i,
        input[type="radio"]:disabled+i {
            border-color: #ccc;
        }
        
        label.chk input[type="checkbox"]:checked:disabled+i,
        input[type="radio"]:checked:disabled+i {
            background: #ccc;
        }
    </style>

</head>

<body>
    <label class="chk" for="rememberUserInfo">
                <input type="checkbox" id="rememberUserInfo" name="rememberUserInfo" onclick="javascript:this.checked='checked';" />
                <i>✓</i>
                <span>记住用户</span>
        </label>


</body>

</html>